<template>
  <div class="firm-annual-check">
    <div class="bg-c-fff">
      <h2 class="box-title rel">律所年检</h2>
      <div class="right-box">
        <form action="">
          <ul>
            <li>
              <span>律所名称：</span>
              <p class="dib p">{{name}}</p>
            </li>
            <li>
              <span>律师事务所执业许可证：</span>
              <input type="button" value="选择文件" class="upload-css" id="selectBtn">
              <input type="button" value="上传" class="upload-css" @click="startUpload">
              <div class="dib remark vm">若您的律所已完成年检，请上传最新的律所执业许
                <br>可证支持.jpg、.jpeg、.bmp、.gif、.png图片格式，大小不超过2M</div>
              <div class="preview-box">
                <div class="preview" v-if="!pic">
                  <div class="db auto tc">待上传</div>
                </div>
                <div class="preview-img" v-else>
                  <img :src="pic">
                </div>
              </div>
            </li>
            <li class="button">
              <span></span>
              <input type="button" value="保存" class="blue-button cup" @click="onSubmit">
              <!-- <input type="button" value="取消" class="white-button cup" @class="onBack"> -->
            </li>
          </ul>
        </form>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import { mapState } from 'vuex'
import UploaderManager from '../components/UploaderManager'
import * as events from '../store/events'
export default {
  data() {
    return {
      uploader: null
    }
  },
  computed: {
    ...mapState({
      name: s => {
        return s.lawfirmLoginData.lawyerfirmName
      },
      pic: s => {
        return s.lawfirmLoginData.lawfirmLicense
      }
    })
  },
  mounted() {
    this.initUploader()
  },
  methods: {
    onSubmit() {
      if (!this.pic) {
        this.$toasted.show('请上传许可证照片')
        return
      }
      this.$http.post('/memberLawfirm/yearInspection/submit', {
        lawfirmLicense: this.pic
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.$toasted.show('提交成功，请等待审核')
        } else {
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
        this.$toasted.show('网络出错')
      })
    },
    onBack() {
      window.back()
    },
    startUpload() {
      if (this.uploader.startUpload()) {

      } else {
        this.$toasted.show('正在上传文件，请稍后再试')
      }
    },
    initUploader() {
      this.uploader = new UploaderManager('lawyer-firm-photo', 'selectBtn', (url) => {
        this.$toasted.show('上传成功')
        this.$store.commit(events.FIRM_PHOTO_CHANGE, url)
      })
    }
  }
}

</script>
<style type="text/css" scoped>
.firm-annual-check ul li span {
  width: 194px;
  display: inline-block;
  text-align: right;
  color: #666666;
  margin-right: 20px;
}

.firm-annual-check ul li {
  padding: 10px 0;
}

.remark {
  width: 330px;
  color: #a5a5a5;
  line-height: 17px;
}

.upload-css {
  background-color: #d8e7ff;
  border: 1px solid #2a508c;
  width: 150px;
  height: 40px;
  color: #01378c;
  cursor: pointer;
  margin-right: 25px;
}

.upload-btn {
  left: -154px;
  top: 0;
  cursor: pointer;
  width: 151px;
}

.p {
  color: #666;
}

.preview div {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  border: 1px solid #cccccc;
  margin-top: 10px;
  line-height: 100px;
  color: #ccc;
}

.icon-asterisk {
  position: relative;
  right: 35px;
  color: #ec5303;
  font-size: 25px;
  top: 3px;
}

.preview-box {
  margin-left: 217px;
  margin-top: 10px;
}

.preview {
  width: 120px;
  height: 120px;
  border: 1px solid #cccccc;
  margin-right: 70px;
}

.input-w1 {
  width: 385px;
}

.button input {
  width: 150px;
  line-height: 35px;
  margin-right: 25px;
}

select {
  width: 121px;
  height: 35px;
}

input::-webkit-input-placeholder {
  color: #a5a5a5;
}

.preview-img {
  width: 200px;
}

.preview-img img {
  width: 100%;
  height: auto;
}

</style>
